<template>
  <div>
    <!-- 子向父传值 -->
    <!-- 先给子组件绑定一个自定义事件 -->
    <MyProduct 
    v-for="item in list"
    :key="item.id"
    :title="item.proname" 
    :money="item.price" 
    :info="msg" 
    :id="item.id"
    @kan="kanFn"
    />
  </div>
</template>

<script>
// 引入
// 注册
// 使用

//父向子转值
// 1.在父组件中给子组件添加自定义属性
//  @自定义属性名：“处理函数”
// 2.子组件在特定的时间内触发这个事件
import MyProduct from './components/MyProduct.vue'
export default {
  components :{
    MyProduct
  },

  data() {
    return {
      msg:'超级辣的鸡腿',
      list:[
        {id:1,proname:'超级鸡腿',price:699},
        {id:2,proname:'超级鸭腿',price:599},
        {id:3,proname:'超级鹅腿',price:499}
      ]
      
    };
  },
  methods: {
    kanFn(id){
      // console.log('我被触发了',id);
      const product = this.list.find(item => item.id === id)
      product.price -= 5

    }
    
  },
};
</script>

<style  scoped>

</style>